<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <h1>JQuery中ajax函数的相关应用</h1>
  <div>
    <button onclick="doGet()">$.get(...)</button>
    <button onclick="doPost()">$.post(...)</button>
    <button onclick="doAjax()">$.ajax(...)</button>
    <button onclick="doLoad()">$("").load(...)</button>
  </div>
  <fieldset>
     <legend>响应结果呈现区</legend>
     <div id="result">loading data....</div>
  </fieldset>
  <script type="text/javascript" src="/jquery/jquery.min.js"></script>
  <script type="text/javascript">
      //向服务端发送Ajax Get 请求
      function doGet(){
    	  //1.定义请求的url
    	  var url="doAjaxGet";
    	  //2.定义请求的参数
    	  var params="msg=hello jquery ajax get";
    	  //3.发送异步Get请求
    	  //这里的$符号为jQuery中的一个对象
    	  //get(url[,params][,callback][,dataType])为jquery中的一个ajax函数
    	  //这里的$是jQuery对象的一个简写形式(它指向的是jQuery对象)
    	  $.get(url,params,function(result){
    		  //document.getElementById("result").innerHTML=result;
    		  $("#result").html(result);
    	  },"text");//在这个函数中你看到ajax的代码了吗?
      }
      //向服务端发送Ajax Post 请求
      function doPost(){
    	  //1.定义请求的url
    	  var url="doAjaxPost";
    	  //2.定义请求的参数
    	  var params="msg=hello jquery ajax Post";
    	  //3.发送异步POST请求
    	  //这里的$符号为jQuery中的一个对象
    	  //post(url[,params][,callback][,dataType])为jquery中的一个ajax函数
    	  $.post(url,params,function(result){//post请求一般用于向服务端提交数据
    		  $("#result").html(result);
    	  });//在这个函数中你看到ajax的代码了吗?
      }
      
      //向服务端发送Ajax Post 请求
      function doAjax(){
    	  //1.定义请求的url
    	  var url="doAjaxGet";
    	  //2.定义请求的参数
    	  var params="msg=hello jquery ajax request";
    	  //3.发送异步Get请求
    	  //这里的$符号为jQuery中的一个对象
    	  $.ajax({
    		  type:"GET",//表示get请求(默认为get),省略不写为Get
    		  url:url,//":"左边的内容为语法定义,我们不能修改.":"右边为我们自己定义
    		  data:params,//请求参数
    		  async:true,//true表示异步
    		  success:function(result){ //回调函数
    			  $("#result").html(result); 
    		  }
    	  });//在这个函数中你看到ajax的代码了吗?
      }
      function doLoad(){
    	  //1.定义请求的url
    	  var url="doAjaxGet";
    	  //2.定义请求的参数
    	  var params="msg=hello jquery ajax request";
    	  //3.发送异步Get请求
    	  //在指定位置异步加载url对象的资源,
    	  //在当前应用中表示把url对象的资源呈现到#result位置.
    	  //$("#result").load(url,params,function(){//回调函数,资源加载完成执行此函数
    	  //  console.log("load complete");
    	  //});
    	  $("#result").load(url);//假如不向服务端传值,不需要处理load完以后的结果,还可以这样写
      }
      //................
  </script>

</body>
</html>